import echarts from "echarts";
import Vue from 'vue'
import Worldname from "./worldname"
import router from '../router'

window.routerEvent = function(name) {
	router.push({
		name: "City",
		params: {
			city: name
		}
	});
}


const install = function() {
	Object.defineProperties(Vue.prototype, {
		$charts: {
			get() {
				return {
					line: function(id, data, date, max) {
						var dom = document.getElementById(id);
						var myCharts = echarts.init(dom);
						var option = {
							grid: {
								left: "15%",
								right: "5%",
								top: "15%",
								bottom: "15%"
							},
							xAxis: {
								type: 'category',
								data: date
							},
							yAxis: {
								type: 'value',
								max: max
							},
							series: [{
								data: data,
								type: 'line'
							}]
						};
						myCharts.setOption(option);
					},
					chinaMap: function(id, data) {
						var dom = document.getElementById(id);
						var myCharts = echarts.init(dom);
						var option = {
							tooltip: {
								triggerOn: "click",
								enterable: true, //有a链接设置为true
								formatter: function(params) {
									return "<div><p onclick='routerEvent(&apos;" + params
										.name + "&apos;)'>" +
										params.name +
										"</p><p>现存确诊：" +
										params.value + "</div>";
								}
							},
							visualMap: {
								showLabel: !0,
								text: ["高", "低"],
								pieces: [{
										gt: 500,
										label: "500以上",
										color: "#4F070D",
									},
									{
										gte: 100,
										lte: 500,
										label: "100 - 500",
										color: "#E55A4E",
									},
									{
										gte: 10,
										lt: 100,
										label: "10 - 100",
										color: "#FE9E83",
									},
									{
										gt: 0,
										lt: 10,
										label: "0 - 10",
										color: "#FDFDCF",
									},
									{
										value: 0,
										color: "#fff",
									},
								],
								show: !0,
							},
							series: [{
								name: '省',
								type: 'map',
								map: 'china',
								roam: false,
								zoom: 1.2,
								aspectScale: 0.75,
								label: {
									normal: {
										show: true,
										textStyle: {
											color: 'rgba(0,0,0,0.4)'
										}
									}
								},
								itemStyle: {
									normal: {
										areaColor: 'rgba(255,255,255)',
										borderColor: 'rgba(118,237,236,1)',
									},
									emphasis: {
										areaColor: 'rgba(118,237,236,0.8)',
										shadowOffsetX: 0,
										shadowOffsetY: 0,
										shadowBlur: 20,
										borderWidth: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'

									}
								},
								data: data
							}]
						};
						myCharts.setOption(option);
					},
					cityMap: function(id, data, cityname) {
						var dom = document.getElementById(id);
						var myCharts = echarts.init(dom);
						var option = {
							tooltip: {
								formatter: function(params) {
									return "<div><p>" +
										params.name +
										"</p><p>现存确诊：" +
										params.value + "</div>";
								}
							},
							visualMap: {
								showLabel: !0,
								text: ["高", "低"],
								pieces: [{
										gt: 500,
										label: "500以上",
										color: "#4F070D",
									},
									{
										gte: 100,
										lte: 500,
										label: "100 - 500",
										color: "#E55A4E",
									},
									{
										gte: 10,
										lt: 100,
										label: "10 - 100",
										color: "#FE9E83",
									},

									{
										gt: 0,
										lt: 10,
										label: "0 - 10",
										color: "#FDFDCF",
									},

									{
										value: 0,
										color: "#fff",
									},
								],
								show: !0,
							},
							series: [{
								name: '市',
								type: 'map',
								map: cityname,
								roam: false, //是否允许缩放
								zoom: 1.2,
								aspectScale: 0.75,
								label: {
									normal: {
										show: true,
										textStyle: {
											color: 'rgba(0,0,0,0.4)'
										}
									}
								},
								itemStyle: {
									normal: {
										areaColor: 'rgba(255,255,255)',
										borderColor: 'rgba(118,237,236,1)',
									},
									emphasis: {
										areaColor: 'rgba(118,237,236,0.8)',
										shadowOffsetX: 0,
										shadowOffsetY: 0,
										shadowBlur: 20,
										borderWidth: 0,
										shadowColor: 'rgba(0, 0, 0, 0.5)'
									}
								},
								data: data
							}]
						};
						myCharts.setOption(option);
					},
					worldMap: function(id, data) {
						var dom = document.getElementById(id);
						var myCharts = echarts.init(dom);
						var option = {
							tooltip: {
								triggerOn: "click",
								enterable: true,
								formatter: function(params) {
									return "<div><p>" + params.name +
										"</p><p>现存确诊：" +
										params.value + "</div>";
								}
							},
							visualMap: {
								showLabel: !0,
								text: ["高", "低"],
								pieces: [{
										gt: 1000000,
										label: "1000000以上",
										color: "#4F070D",
									},
									{
										gte: 10000,
										lte: 1000000,
										label: "10000 - 1000000",
										color: "#E55A4E",
									},
									{
										gte: 1000,
										lt: 10000,
										label: "1000 - 10000",
										color: "#FE9E83",
									},
									{
										gt: 0,
										lt: 1000,
										label: "0 - 1000",
										color: "#FDFDCF",
									},
									{
										value: 0,
										color: "#fff",
									},
								],
								show: !0,
							},
							series: [{
								name: "world世界地图",
								type: "map",
								mapType: "world",
								label: {
									normal: {
										show: false,
										fontSize: "14",
										color: "#fff",
									},
								},
								zoom: 2,
								//center: [110.97, 35.71],中国
								nameMap: Worldname,
								roam: true,
								itemStyle: {
									emphasis: {
										areaColor: "#ff6700",
									},
								},

								data: data,
							}]
						};
						myCharts.setOption(option);

					}
				}
			}
		}
	})
}
export default install;
